<template>
	<view>
		<u-loading-page :loading="loading" loading-text=" "></u-loading-page>
		<u-empty mode="search" v-if="list.length===0" :text="emptyPrompt"></u-empty>
		<view class="u-page">
			<u-list @scrolltolower="scrolltolower" @scrolltotopper="scrolltotopper" v-if="userType == 1">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="card_list">
						<view class="allowence_card">
							<view class="allowence_time">
								<view><text>{{$mytools.formatTimestampToDateStr(item.allowence_time)}}</text></view>
								<view><text>{{$mytools.formatTimestampToDateTimeStr(item.allowence_time)}}</text></view>
							</view>
							<view class="divider"></view>
							<view class="allowence_amount">再花币:
								<text
									class="allowence_amount_number">{{$mytools.regFenToYuan(item.zhb_allowence_amount)}}</text>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<u-list @scrolltolower="scrolltolower" @scrolltotopper="scrolltotopper" v-if="userType == 2">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="card_list">
						<view class="allowence_card">
							<view class="allowence_time">
								<view><text>{{$mytools.formatTimestampToDateStr(item.allowence_time)}}</text></view>
								<view><text>{{$mytools.formatTimestampToDateTimeStr(item.allowence_time)}}</text></view>
							</view>
							<view class="divider"></view>
							<view class="allowence_amount">备付金补贴:
								<text
									class="allowence_amount_number">{{$mytools.regFenToYuan(item.bs_reverse_allowence_amount)}}</text>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-loadmore v-show="list.length>size" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
			margin-bottom="30" />
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				emptyPrompt: '暂无补贴记录',
				list: [],
				userType: 0,
				size: 10,
				loading: true,
				// nomore，loading，loadmore
				status: 'loadmore',
			}
		},
		onLoad() {
			// 初始化参数
			this.list = []
			this.status = 'loadmore'
			this.userType = uni.getStorageSync(app.globalData.session.userAccountType)
			// 开启下拉刷新
			uni.startPullDownRefresh();
			// do something
			this.loadmore()
		},
		onPullDownRefresh() {
			this.loading = true
			this.list = []
			this.status = 'loadmore'
			this.loadmore()
			console.log('onPullDownRefresh');
			// 判断是否在查询中，防止多次下拉
			if (this.status == 'loading' || this.status == 'nomore') {
				console.log('正在刷新');
				uni.hideLoading()
				return;
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
				// 加载框和下拉加载一起消失，此处不需要，调用loadmare完成后会设置为false
				// this.loading = false
			}, 500);
		},
		onReachBottom() {
			console.log('onReachBottom');
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.loadmore()
		},
		methods: {
			loadmore() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				this.loadmoreUserAndBusinessAllowenceRecord()
			},
			// 顶部
			scrolltoupper() {
				console.log('scrolltoupper');
				this.list = []
				this.status = 'loadmore'
				this.userType = uni.getStorageSync(app.globalData.session.userAccountType)
				// do something
				this.loadmore()
			},
			// 底部
			scrolltolower() {
				console.log('scrolltolower');
				this.loadmore()
			},
			async loadmoreUserAndBusinessAllowenceRecord() {
				this.loading = true
				this.status = "loading";
				let that = this
				let params = {
					// user_id: userinfo.user_id,
					queryType: 1,
					skip: that.list.length,
					size: this.size
				}
				let currUserType = uni.getStorageSync(app.globalData.session.userAccountType)
				if (currUserType == 1) {
					// 用户端
					let userinfo = uni.getStorageSync(app.globalData.session.userInfo)
					params.user_id = userinfo.user_id
					params.queryType = 1
				} else {
					// 商户端
					let businessInfo = uni.getStorageSync(app.globalData.session.businessInfo)
					params.business_id = businessInfo.offlineBusinessId
					params.queryType = 2
				}
				let result = await uniCloud.callFunction({
					name: 'zhy-allowence-record-query',
					data: params,
				})
				if (result.result.length < this.size) {
					this.status = "nomore"
				} else {
					this.status = "loadmore"
				}
				this.status = "loadmore"
				console.log('list:' + JSON.stringify(result));
				if(this.list.length >0 && result.result.length > 0){
					if (this.list[0]._id === result.result[0]._id) {
						console.log('多次下拉刷新');
						this.list = []
					}
				}
				this.list = this.list.concat(result.result)
				console.log('list:' + JSON.stringify(that.list));
				uni.stopPullDownRefresh();
				this.loading = false
			}
		}
	}
</script>

<style>
	page {
		background: #eaeaea;
	}

	.card_list {
		padding-top: 5rpx;
	}

	.allowence_card {
		display: flex;
		background-color: white;
		border-radius: 150rpx;
		height: 130rpx;
		margin-top: 10rpx;
		width: 94%;
		margin-left: 3%;
	}

	.divider {
		width: 1px;
		height: 68rpx;
		border-left: 1px dashed #cecece;
		margin-top: 20rpx;
	}

	.allowence_time {
		width: 35%;
		text-align: center;
		align-self: center;
		font-size: 30rpx;
	}

	.allowence_amount {
		width: 80%;
		align-self: center;
		margin-left: 10%;
		font-size: 32rpx;
	}

	.allowence_amount_number {
		margin-left: 10rpx;
	}
</style>